<template>
  <div class="hot">
    <div class="cover">
      <div>
        <div>
          <div class="cover-name"></div>
          <div v-if="hotInfo" class="date">更新日期:&nbsp;{{ hotInfo.updateTime|formatDate("m月d日")}}</div>
        </div>
      </div>
      <div class="mask"></div>
    </div>
    <song-list @play="$emit('play',$event)" :shownumber="true" v-if="showSong.length>0" :songlist="showSong"></song-list>
    <music-loading v-else></music-loading><!-- 加载组件 -->
    <div v-show="showSong.length>0" class="more" @click="loadMore" ref="more">
      {{page>=10?"我是有底线的(●'u'o)":"点击加载更多"}}
    </div>
  </div>
</template>
<script>
import SongList from '@/components/SongList'
import MusicLoading from '@/components/MusicLoading'
export default {
  data() {
    return {
      hotInfo: null, 
      hotSong: [],
      page:1 
    };
  },
  created() {
    this.getHotInfo(); 
  },
  beforeRouteEnter(to,from,next){
    next(vm=>{
      window.addEventListener("scroll",vm.scrollbar);
    })
  },
  beforeRouteLeave(to,from,next){
    window.removeEventListener("scroll",this.scrollbar);
    next();
  },
  methods: {
    async getHotInfo() {
        let re = await this.axios.get("/playlist/detail?id=3778678");
        this.hotInfo = re.playlist;
        let hotSong = re.playlist.tracks; 
            this.hotSong =hotSong.map((song,index)=>{
               //没有song属性就构造一个song属性
               song.song={  
                 artists:song.ar,  
                 privilege:re.privileges[index],
                 album:song.al
               } 
                return song;
            }) 
    },
    loadMore(){
      if(this.page>=10){
        return;
      }
      this.page++; 
    },
    scrollbar(){
      let el=document.documentElement||document.body;
      let top=el.scrollTop+el.clientHeight;
      // console.log("获取滚动卷起的距离=>scrollTop==>",top);
      let moretop=this.$refs.more.offsetTop;
      // console.log("加载条的距离顶部的距离moretop==>",moretop);
      if(top>=moretop+40){//要计算准确
        this.loadMore();
      }
    }
  },
  computed:{
    showSong(){
      return this.hotSong.slice(0,20*this.page);
    }
  },
  components:{
    SongList,
    MusicLoading
  }
};
</script>

<style lang="less" scoped>
.hot {
  .cover {
    height: 21vh;
    background: url(../assets/hot_music_bg_2x.jpg) no-repeat left top;
    background-size: cover; 
    align-items: center;
    position: relative;
    & > div {
      position: absolute;
      width: 100%;
      height: 100%;
      left: 0;
      top: 0;
      z-index: 2;
      display: flex;
      align-items: center;
      &>div{
        flex: 1;
        padding-left: 20px;
      }
      .cover-name {
        width: 100%;
        height: 10vh;
        background: url(../assets/index_icon_2x.png) no-repeat -24px -30px;
        background-size: 166px 97px; 
      }
      .date {
        font-size: 12px;
        margin-top: 10px;
        color: white;
      }
    }
    & > div.mask {
      background: rgba(0, 0, 0, 0.2);
      z-index: 1;
    }
  }
  .more{
    text-align: center;
    line-height: 40px;
    font-size:13px;
    color:#666;
  }
}
</style>
